<?xml version="1.0" encoding="UTF-8"?>
<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"  xmlns:ui="http://java.sun.com/jsf/facelets"                        
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.org/ui"
      xmlns:h="http://java.sun.com/jsf/html"      >
    <h:head>     
        <link href="#{facesContext.externalContext.requestContextPath}/resources/css/default.css" rel="stylesheet" type="text/css" />
        <link href="#{facesContext.externalContext.requestContextPath}/resources/css/cssLayout.css" rel="stylesheet" type="text/css" />
        <link href="#{facesContext.externalContext.requestContextPath}/resources/css/menu.css" rel="stylesheet" type="text/css" />
        <title>Blue Pumpkin Admin Page</title>
    </h:head>
    <h:body>
        <div class="main_body_admin" >
            <div class="separator_div"/>
            <div class="admin_logo"/>

            <h:form id="frmMain">
                <p:menubar style="text-align: center" >
                   <p:menuitem value="Event" style="color: blueviolet; font-weight: bold" styleClass="admin_menu_current" > </p:menuitem> 
                    <p:menuitem value="Prize" actionListener="#{naviagtionControl.redirectToPrizePage()}" ></p:menuitem> 
                    <p:menuitem value="User"   actionListener="#{naviagtionControl.redirectToUserPage()}" ></p:menuitem> 
                    <p:menuitem value="FAQ"  actionListener="#{naviagtionControl.redirectToFAQsPage()}" ></p:menuitem> 
                    <p:menuitem value="Contact" actionListener="#{naviagtionControl.redirectToContactPage()}"  ></p:menuitem> 
                    <p:menuitem value="Registration" actionListener="#{naviagtionControl.redirectToRegistrationPage()}" ></p:menuitem> 
                    <p:menuitem value="Winner" actionListener="#{naviagtionControl.redirectToWinnerPage()}"  ></p:menuitem> 
                    <p:menuitem value="Comment" actionListener="#{naviagtionControl.redirectToCommentsPage()}"  ></p:menuitem> 
                    <p:submenu label="#{userControl.user.fullName}"    >
                         <p:menuitem value="Edit Profile" actionListener="#{userControl.redirectToLogonUserPage()}" ></p:menuitem> 
                        <p:menuitem value="Log out" actionListener="#{userControl.logout()}"  ></p:menuitem> 
                    </p:submenu>

                </p:menubar>
            </h:form>

            <div class="content_display">
                <h:form>
                    <p:toolbar>
                        <p:toolbarGroup>
                            <p:commandButton value="Add Event" actionListener="#{eventControl.redirectToAddEvent()}"/>
                            <p:commandButton value="View Events" actionListener="#{eventControl.redirectToListEvent()}" />

                        </p:toolbarGroup>
                    </p:toolbar>
                </h:form>
                <p:spacer height="5px" />
                <p:panel style="width: 99%;">

                    <h:form enctype="multipart/form-data" id="frmEvt">
                        <!--                           Dialog show event Details-->

                        <p:dialog id="diaEventDetails" modal="true" showEffect="fade"
                                  hideEffect="explode" widgetVar="dia"  >
                            <p:panel header="Event Details"> 
                                <h:panelGrid columns="1" style="width: 98%" id="display1">

                                    <h:outputLabel class="bold color_blue" value="#{eventControl.decodeString(eventControl.selectedevent.title)}"></h:outputLabel>

                                    <p:separator style=" color: #ff6400" ></p:separator>
                                </h:panelGrid>
                                <h:panelGrid columns="2" style="width: 98%" id="display2">  

                                    <a href="#"><img src="#{eventControl.selectedevent.photo}" height="100" width="70" /> </a>

                                    <h:panelGrid columns="1" width="100%">
                                        <h:panelGrid  columns="4" title="#{eventControl.decodeString(eventControl.selectedevent.title)}" >

                                            <h:outputLabel value="Start at:" class="color_blue"></h:outputLabel>
                                            <h:outputLabel value="#{eventControl.selectedevent.startDate}"  class="bold"  >
                                                <f:convertDateTime timeZone="GMT+7" type="date" pattern="MM/dd/yyyy" />
                                            </h:outputLabel>
                                            <h:outputLabel value="End at:" class="color_blue" ></h:outputLabel>
                                            <h:outputLabel value="#{eventControl.selectedevent.endDate}" >
                                                <f:convertDateTime timeZone="GMT+7" pattern="MM/dd/yyyy"  />
                                            </h:outputLabel>
                                            <h:outputLabel value="Register at:" class="color_blue_red"></h:outputLabel>
                                            <h:outputLabel value="#{eventControl.selectedevent.startRegDate}"  class="bold"  >
                                                <f:convertDateTime pattern="MM/dd/yyyy" timeZone="GMT+7" />
                                            </h:outputLabel>
                                            <h:outputLabel value="Due to:" class="color_blue_red"></h:outputLabel>
                                            <h:outputLabel value="#{eventControl.selectedevent.endRegDate}"  class="bold"  >
                                                <f:convertDateTime pattern="MM/dd/yyyy" timeZone="GMT+7" />
                                            </h:outputLabel>
                                        </h:panelGrid>
                                        <h:panelGrid columns="1" style="width: 100%;">

                                            <div style=" word-wrap: break-word; width: 500px " >#{eventControl.decodeString(eventControl.selectedevent.description)} </div>
                                        </h:panelGrid>
                                    </h:panelGrid>
                                </h:panelGrid>  
                            </p:panel>
                        </p:dialog>
                        <!--                      END       Dialog show event Details-->



                        <p:dataTable value="#{eventControl.allEvent}" var="event"  paginator="true" rows="10" widgetVar="dataTable" 
                                     emptyMessage="No event found." style="width: 900px"  
                                     paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"  
                                     rowsPerPageTemplate="5,10,15" >
                            <f:facet name="header">  
                                Events List
                            </f:facet>  
                            <p:column>  
                                <f:facet name="header">  
                                    <h:outputText value="Pic" />  
                                </f:facet>  
                                <h:commandLink actionListener="#{eventControl.redirectToEventDetails()}" ><img src="#{event.photo}" height="100" width="70" />
                                    <f:setPropertyActionListener value="#{event}" target="#{eventControl.selectedevent}" />
                                </h:commandLink>

                            </p:column>  
                            <p:column filterBy="#{event.title}" filterMatchMode="contains" >  
                                <f:facet name="header">  
                                    <h:outputText value="Title" />  
                                </f:facet>  
                                <h:commandLink value="#{event.title}"   actionListener="#{eventControl.redirectToEventDetails()}"
                                               style="color: blue;word-wrap: break-word; width: 120px ; text-decoration: none" >
                                    <f:setPropertyActionListener value="#{event}" target="#{eventControl.selectedevent}" />
                                </h:commandLink> 
                               
                            </p:column>  
                            <p:column filterBy="#{event.description}" filterMatchMode="contains"  >  
                                <f:facet name="header">  
                                    <h:outputText value="Content" />  
                                </f:facet>  
                                <div style=" word-wrap: break-word; width: 350px " >#{event.description} </div>
                            </p:column>  
                            <p:column>  
                                <f:facet name="header">  
                                    <h:outputText value="Information" />  
                                </f:facet>  
                                <h:panelGrid  columns="2" title="#{event.title}" >

                                    <h:outputLabel value="Start at:" class="color_blue"></h:outputLabel>
                                    <h:outputLabel value="#{event.startDate}"  class="bold"  >
                                        <f:convertDateTime timeZone="GMT+7" type="date" pattern="MM/dd/yyyy" />
                                    </h:outputLabel>
                                    <h:outputLabel value="End at:" class="color_blue" ></h:outputLabel>
                                    <h:outputLabel value="#{event.endDate}" >
                                        <f:convertDateTime timeZone="GMT+7" pattern="MM/dd/yyyy"  />
                                    </h:outputLabel>
                                    <h:outputLabel value="Register:" class="color_blue_red"></h:outputLabel>
                                    <h:outputLabel value="#{event.startRegDate}"  class="bold"  >
                                        <f:convertDateTime pattern="MM/dd/yyyy" timeZone="GMT+7" />
                                    </h:outputLabel>
                                    <h:outputLabel value="Due to:" class="color_blue_red"></h:outputLabel>
                                    <h:outputLabel value="#{event.endRegDate}"  class="bold"  >
                                        <f:convertDateTime pattern="MM/dd/yyyy" timeZone="GMT+7" />
                                    </h:outputLabel>
                                </h:panelGrid>
                            </p:column>  

                            <p:column  >
                                <p:commandButton value="Detail" style="width: 90px; font-size: 13px;"  update="@form" icon="ui-icon-arrowrefresh-1-w"
                                                 oncomplete  ="dia.show();"        >
                                    <f:setPropertyActionListener value="#{event}" target="#{eventControl.selectedevent}" />
                                </p:commandButton>
                                <p:spacer height="5px" />
                                <p:commandButton  style="width: 90px; font-size: 13px;"
                                                  actionListener="#{eventControl.redirectToUpdateEvent()}"  value="Update" icon="ui-icon-arrowrefresh-1-w">  
                                    <f:setPropertyActionListener value="#{event}" target="#{eventControl.selectedevent}" />

                                </p:commandButton>


                                <p:spacer height="5px" />
                                <p:commandButton  value="Delete" style="width: 90px; font-size: 13px;" onclick="confirmation.show()" icon="ui-icon-close" >
                                    <f:setPropertyActionListener value="#{event}" target="#{eventControl.selectedevent}" />
                                </p:commandButton>
                                <p:confirmDialog id="confirmDialog" message="Are you sure about delete this Event?"  
                                                 header="Initiating destroy process" severity="alert" widgetVar="confirmation">
                                    <p:commandButton id="confirm" style="font-size: 11px;" actionListener="#{eventControl.delete(eventControl.selectedevent)}" 
                                                     value="Yes" oncomplete="confirmation.hide()"/>
                                    <p:commandButton id="decline" style="font-size: 11px;" value="No" onclick="confirmation.hide()" />   
                                </p:confirmDialog>
                            </p:column>

                        </p:dataTable>


                    </h:form>
                </p:panel>

            </div>
        </div>
    </h:body>
</html>
